/*
* Created by: yyf
* Description: 基金管理--拟设立基金 头部详情
*/
<template>
    <div>
        <div class="ca-box ca-p-20" v-if="!isEdit">
            <el-row v-if="!isEdit">
                <el-col class="pull-right ca-align-right">
                    <i class="ca-edit-btn el-icon-edit" @click="changeHeadEdit(true)">编辑</i>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6" class="ca-border-r ca-m-r-40 ca-p-r-20 ca-align-center">
                    <h3 class="ca-title-fullname wordBreak">{{fundEntity.fundFullname}}</h3>
                    <h4 class="ca-title-name wordBreak">({{fundEntity.fundName}})</h4>
                    <div>
                        <span class="establishBtn">拟设立</span>
                        <span class="investingBtn">已设立</span>
                    </div>
                    <div class="ca-m-t-5">
                        <el-button type="text" class="ca-p-8" :disabled="fundEntity.deleteStatus===2 || !isAuthToInvest" @click="toInvestingFund()">一键转已设立基金</el-button>
                    </div>
                </el-col>
                <el-col :span="16">
                    <el-row class="ca-leng-28 ca-head-font">
                        <el-col :span="12">
                            <el-row>基金类型：{{fundEntity.fundType | getNameById('fundType')}}</el-row>
                            <el-row>基金经理：{{fundUser}}</el-row>
                            <el-row>拟设立日期：
                                <template>
                                    {{fundEntity.establishTime ? this.$moment(fundEntity.establishTime).format("YYYY-MM-DD") : ''}}
                                </template>
                            </el-row>
                        </el-col>
                        <el-col :span="12">
                            <el-row>拟设立规模（万元）：<span class="ca-color__money">{{fundEntity.fundScale | format1}}</span></el-row>
                            <el-row>
                                <span>投资方向：</span>
                                <i class="ca-font-size-14" v-for="(item,index) in industryList" :key="index">{{item.industry | getNameById('industry')}}&nbsp;&nbsp;</i>
                            </el-row>
                            <el-row>存续期：<span class="ca-color__money wordBreak">{{fundEntity.investmentPeriod}}+{{fundEntity.exitPeriod}}</span></el-row>
                        </el-col>
                    </el-row>
                    <el-row>
                        基金管理团队：<span v-for="(user, index) in fundUserManage" :key="index" class="ca-font-size-14">{{user}}&nbsp;&nbsp;</span>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <headEdit v-if="isEdit" @changeHeadEdit="changeHeadEdit"></headEdit>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                itemId: '',
                isEdit: false,
                isAuthEdit: false,
                fundEntity: {},//头部详情
                fundUserList: [],
                industryList: [],
                fundUser: '',//基金经理
                fundUserManage: [],
                isAuthToInvest: isNoAuth('拟设立基金-基金详情-一键转已设立'),
            }
        },
        props: {
            fundId: {  //基金Id
                type: String
            },
        },
        watch: {
        },
        created() {
            this.itemId = this.$route.params.itemId;
            this.getFundHeadDetail();
        },
        methods: {
            // 获取基金头部详情
            async getFundHeadDetail() {
                let {resCode, data} = await apiHttp(api.ESTABLISHING_FUNDS_HEAD_DETAIL, {id: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.fundEntity = data.fundEntity;
                    this.fundUserList = data.fundUserList;
                    this.industryList = data.industryList;
                    //显示基金经理
                    this.fundUserList.map(userManage=>{
                        if (userManage.userType === '1') {
                            this.fundUser = userManage.userName;
                        }
                    })
                    //显示基金管理团队
                    this.fundUserManage = this.fundUserList.map(userTeam=>{
                        if (userTeam.userType === '2') {
                            return userTeam.userName;
                        }
                    })
                }
            },
            // 切换编辑和详情
            changeHeadEdit(state) {
                this.isEdit = state;
                if (state === false) {
                    this.getFundHeadDetail();
                }
            },
            // 一建转已设立基金
            toInvestingFund() {
                this.$confirm('是否转成已设立基金', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    showClose: false
                }).then(() => {
                    this.$router.push({name: 'investing-funds-add', params: {establishId: this.itemId,openWindow: false}})
                })
            },
        },
        components: {
            headEdit: require('./edit'), // 头部编辑
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .establishBtn,.investingBtn {
        display: inline-block;
        width: 52px;
        height: 22px;
        color:#fff;
        line-height:22px;
        text-align: center;
        margin-top:6px;
    }
    .investingBtn {
        background-color: #999;
    }
    .establishBtn {
        background-color: #f19149;
    }
    .ca-head-font .el-row{
        font-size:14px;
        color: #313131;
    }
    .ca-head-font span {
        font-size: 14px;
    }
    .ca-title-fullname {
        font-size: 18px;
        line-height: 26px;
        color: #333;
    }
    .ca-title-name {
        font-size: 14px;
        line-height: 20px;
        color: #666;
        font-weight: normal;
    }
    .wordBreak{
        word-break: break-all;
    }
</style>
